<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <!--<meta name="layout" content="main"/>-->
    <title>${clique.name}</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/2.5.1/build/reset-fonts-grids/reset-fonts-grids.css" type="text/css">
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.1/build/tabview/assets/skins/sam/tabview.css">

    <script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
    <script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/element/element-beta-min.js"></script>
    <script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/tabview/tabview-min.js"></script>
    <style type="text/css">
    /* LIST */

    .list table {
        border-collapse: collapse;
    }

    .list th, .list td {
        border-left: 1px solid #ddd;
    }

    .list th:hover, .list tr:hover {
        background: #b2d1ff;
    }

    .odd {
        background: #f7f7f7;
    }

    .even {
        background: #fff;
    }
    </style>
</head>
<body class="yui-skin-sam">
<div id="doc" class="yui-t7">
    <div id="hd">
        <div class="nav">
            <img src="${createLinkTo(dir: 'images', file: 'globeheader.jpg')}" alt="Dining Philosophers"/>
        </div>
    </div>
    <div id="bd">
        <div id="yui-main">
            <div class="yui-b">
                <div class="yui-g">
                    <div id="demo" class="yui-navset">
                        <ul class="yui-nav">
                            <li class="selected"><a href="#tab1"><em>About</em></a></li>
                            <li><a href="#tab2"><em>Member Directory</em></a></li>
                            <li><a href="#tab3"><em>Events</em></a></li>
                            <li><a href="#tab3"><em>Forums</em></a></li>

                        </ul>
                        <div class="yui-content">
                            <div id="tab1">
                                <h1>${clique.name}</h1>
                                <p>${clique.description}</p>

                            </div>
                            <div id="tab2" class="list">
                                <table>
                                    <thead>
                                        <tr>
                                            <g:sortableColumn property="firstName" title="First Name"/>
                                            <g:sortableColumn property="lastName" title="Last Name"/>
                                            <td></td>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <g:each in="${clique.members}" status="i" var="person">
                                            <tr class="${(i % 2) == 0 ? 'odd' : 'even'}">
                                                <td>${person.firstName?.encodeAsHTML()}</td>
                                                <td>${person.lastName?.encodeAsHTML()}</td>
                                                <td><a href="http://www.google.com">Send Message</a></td>
                                            </tr>
                                        </g:each>
                                    </tbody>
                                </table>
                            </div>

                            <div id="tab3"><p>Event Content</p></div>
                            <div id="tab4"><p>Forums Content</p></div>
                        </div>
                    </div>

                    <g:if test="${flash.message}">
                        <div class="message">${flash.message}</div>
                    </g:if>

                </div>
            </div>
        </div>

    </div>
    <div id="ft">
        Copyright 2008
    </div>
</div>
<script>
    (function() {
        var tabView = new YAHOO.widget.TabView('demo');

        YAHOO.log("The example has finished loading; as you interact with it, you'll see log messages appearing here.", "info", "example");
    })();
</script>

</body>
</html>

